<template>
  <div class="main">
    <section>
      <el-form ref="form" class="search-block" :model="listQuery" label-position="left" label-width="95px">
        <el-row :gutter="50">
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item label="入库商品id：" prop="goodsId">
              <el-input @keyup.enter.native="search" v-model="listQuery.goodsId" placeholder="商品id" maxlength="50" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item label="商品名称：" prop="title">
              <el-input @keyup.enter.native="search" v-model="listQuery.title" placeholder="商品名称" maxlength="50" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item label="商品券后价:" prop="minPrice">
              <div style="display:flex">
                <el-input @keyup.enter.native="search" v-model="listQuery.minPrice" placeholder="最小值" maxlength="50" clearable></el-input>~
                <el-input @keyup.enter.native="search" v-model="listQuery.maxPrice" placeholder="最大值" maxlength="50" clearable></el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="" class="btn-item">
          <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
          <span class="btn-reset" @click="resetForm('form')">清空搜索条件</span>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="syncGoods" style="margin-bottom:20px">马上同步</el-button>
      <el-table v-loading="loading" :data="list" element-loading-text="给我一点时间" border fit highlight-current-row>
        <el-table-column align="center" prop="goodsId" label="入库商品ID">
        </el-table-column>
        <el-table-column align="center" prop="favoritesTitle" label="所选淘宝选品库" width="200">
        </el-table-column>
        <el-table-column align="center" label="商品名" width="210" prop="title">
        </el-table-column>
        <el-table-column align="center" label="商品主图" min-width="100">
          <template slot-scope="scope">
            <img :src="scope.row.imageUrl" style="height: 50px;" alt />
          </template>
        </el-table-column>
        <el-table-column align="center" label="券后价" prop="actualPrice" width="100">
        </el-table-column>
        <el-table-column align="center" prop="commissionRate" label="佣金比列(%)" width="90">
        </el-table-column>
        <!-- <el-table-column align="center" label="一级类" prop="sort" min-width="160">
        </el-table-column> -->
        <el-table-column align="center" label="优惠券剩余" prop="couponRemainCount" min-width="160">
        </el-table-column>
        <el-table-column align="center" label="状态" prop="status" min-width="160">
          <template slot-scope="scope">
            <span>{{scope.row.status === 1? '有效':'无效'}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNum"
        :page-sizes="[10, 20, 50, 100, 200]" :page-size="listQuery.pageSize" background layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"></el-pagination>
    </section>
  </div>
</template>
<script>
import searchForm from '@/components/searchForm/index'
import { favorGoodsManage, syncGoods } from '@/api/bihuasuan/goods'

export default {
  name: 'b-xbk',
  components: {
    searchForm
  },
  data() {
    return {
      currentData: {},
      dialogVisible: false,
      listQuery: {
        goodsId: '',
        maxPrice: '',
        minPrice: '',
        orderBy: '',
        pageNum: 1,
        pageSize: 10,
        title: ''
      },
      loading: true,
      listTotal: 0,
      list: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getList()
    },
    async getList() {
      this.loading = true
      try {
        const { data } = await favorGoodsManage(this.listQuery)
        this.loading = false
        this.list = data.list
        this.listTotal = data.total
      } catch (error) {
        console.log(error)
        this.list = []
        this.listTotal = 0
        this.loading = false
      }
    },
    async syncGoods() {
      try {
        const { data } = await syncGoods()
        if (data) {
          this.$message.success('同步成功')
          this.getList()
        }
      } catch (error) {
        this.$message.error('同步失败')
        console.log(error)
      }
    },
    search() {
      const maxPrice = Number(this.listQuery.maxPrice)
      const minPrice = Number(this.listQuery.minPrice)
      if (this.listQuery.maxPrice && this.listQuery.minPrice) {
        console.log(maxPrice, minPrice)
        if (maxPrice < minPrice) {
          this.$message.error('券后最大值不能小于券后最小值')
          return
        }
      }
      if (isNaN(maxPrice) || isNaN(minPrice)) {
        return this.$message.error('券后价格请输入数字')
      }
      this.listQuery.pageNum = 1
      this.getList()
    },
    // 清空搜索条件
    resetForm() {
      this.$nextTick(() => {
        this.$refs['form'].resetFields()
        this.listQuery.maxPrice = ''
        this.listQuery.minPrice = ''
      })
    },
    handleSizeChange(value) {
      this.listQuery.pageSize = value
      this.getList()
    },
    handleCurrentChange(value) {
      this.listQuery.pageNum = value
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-dialog {
  max-width: 990px;
}
/deep/ .el-dialog .el-input {
  width: 100%;
}
</style>